
<template>
  <div class="component-menu" id="component-menu">
    <el-submenu :index="menu.title+'&'+menu.id" class="component-item" v-if="!menu.isDetail">
      <template slot="title">
        <div class="component-label">
          <i :class="'iconfont '+menu.icon" style="position:relative;z-index:10"></i>
          <span v-if="menu.parent_id===0&&!showMenu">{{menu.title}}</span>
          <span v-if="menu.parent_id!==0">{{menu.title}}</span>
        </div>
      </template>
      <div v-for="childItem in menu.children" :key="childItem.id">
        <div v-if="childItem.children">
          <items :showMenu="showMenu" :menu="childItem" />
        </div>
        <div v-else>
          <el-menu-item
            v-if="!childItem.isDetail"
            class="component-child"
            :index="childItem.path"
            :route="childItem"
          >{{childItem.title}}</el-menu-item>
        </div>
      </div>
    </el-submenu>
  </div>
</template>

<script type="text/javascript">
// 组件递归必要条件，name属性
// 菜单栏组件
export default {
  name: 'items',
  props: {
    menu: {
      type: Object,
      required: true,
      default: () => {}
    },
    showMenu: {
      type: Boolean,
      required: true
    }
  }
}
</script>
<style lang="scss">
.component-menu {
  width: 100%;
  .component-item {
    width: 100% !important;
    .component-label {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .component-child {
      width: 100% !important;
      padding: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 80px !important;
      box-sizing: border-box !important;
    }
  }
}
// 为了不污染其他样式
#component-menu {
  .el-icon-arrow-right:before{
    display: none;
  }
}
</style>

